<template>
  <!-- <div class="order-details"> -->
    <!-- 给header上与data上加on为退款订单-->
    <!-- <div
      class="header bg-color-red acea-row row-middle"
      :class="refundOrder ? 'on' : ''"
    >
      <div class="pictrue" v-if="!refundOrder">
        <img :src="orderInfo.status_pic" />
      </div>
      <div class="data" :class="refundOrder ? 'on' : ''">
        <div class="state">{{ orderInfo._status._msg }}</div>
        <div>
          {{ orderInfo.add_time_y
          }}<span class="time">{{ orderInfo.add_time_h }}</span>
        </div>
      </div>
    </div>
    <template v-if="!refundOrder">
      <div class="nav">
        <div class="navCon acea-row row-between-wrapper">
          <div :class="{ on: status.type === 0 || status.type === 9 }">
            待付款
          </div>
          <div
            :class="{ on: status.type === 1 }"
            v-if="orderInfo.shipping_type === 2"
          >
            待核销
          </div>
          <div :class="{ on: status.type === 1 }" v-else>待发货</div>
          <div
            :class="{ on: status.type === 2 }"
            v-if="orderInfo.shipping_type === 1"
          >
            待收货
          </div>
          <div :class="{ on: status.type === 3 }">待评价</div>
          <div :class="{ on: status.type === 4 }">已完成</div>
        </div>
        <div class="progress acea-row row-between-wrapper">
          <div
            class="iconfont"
            :class="[
              status.type === 0 || status.type === 9
                ? 'icon-webicon318'
                : 'icon-yuandianxiao',
              status.type >= 0 ? 'font-color-red' : ''
            ]"
          ></div>
          <div
            class="line"
            :class="{ 'bg-color-red': status.type > 0 && status.type != 9 }"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type === 1 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 1 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
          ></div>
          <div
            class="line"
            :class="{
              'bg-color-red':
                status.type > 1 && status.type != 6 && status.type != 9
            }"
            v-if="orderInfo.shipping_type === 1"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type === 2 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 2 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
            v-if="orderInfo.shipping_type === 1"
          ></div>
          <div
            class="line"
            :class="{
              'bg-color-red':
                status.type > 2 && status.type != 6 && status.type != 9
            }"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type === 3 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 3 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
          ></div>
          <div
            class="line"
            :class="{
              'bg-color-red':
                status.type > 3 && status.type != 6 && status.type != 9
            }"
          ></div>
          <div
            class="iconfont"
            :class="[
              status.type == 4 ? 'icon-webicon318' : 'icon-yuandianxiao',
              status.type >= 4 && status.type != 6 && status.type != 9
                ? 'font-color-red'
                : ''
            ]"
          ></div>
        </div>
      </div>
      <div
        class="writeOff"
        v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"
      >
        <div class="title">核销信息</div>
        <div class="grayBg">
          <div class="pictrue"><img :src="orderInfo.code" /></div>
        </div>
        <div class="gear"><img src="@assets/images/writeOff.jpg" /></div>
        <div class="num">{{ orderInfo._verify_code }}</div>
        <div class="rules">
          <div class="item">
            <div class="rulesTitle acea-row row-middle">
              <span class="iconfont icon-shijian"></span>核销时间
            </div>
            <div class="info">
              每日：<span class="time">{{ system_store.day_time }}</span>
            </div>
          </div>
          <div class="item">
            <div class="rulesTitle acea-row row-middle">
              <span class="iconfont icon-shuoming1"></span>使用说明
            </div>
            <div class="info">可将二维码出示给店员扫描或提供数字核销码</div>
          </div>
        </div>
      </div>
      <div
        class="map acea-row row-between-wrapper"
        v-if="orderInfo.shipping_type === 2 && orderInfo.paid === 1"
      >
        <div>自提地址信息</div>
        <div
          class="place cart-color acea-row row-center-wrapper"
          @click="showChang"
        >
          <span class="iconfont icon-weizhi"></span>查看位置
        </div>
      </div>
      <div class="address" v-if="orderInfo.shipping_type === 1">
        <div class="name">
          {{ orderInfo.real_name
          }}<span class="phone">{{ orderInfo.user_phone }}</span>
        </div>
        <div>{{ orderInfo.user_address }}</div>
      </div>
      <div class="address" v-else>
        <div class="name">
          {{ system_store.name
          }}<span class="phone">{{ system_store.phone }}</span>
          <a
            class="iconfont icon-tonghua font-color-red"
            :href="'tel:' + system_store.phone"
          ></a>
        </div>
        <div>{{ system_store._detailed_address }}</div>
      </div>
      <div class="line" v-if="orderInfo.shipping_type === 1">
        <img src="@assets/images/line.jpg" />
      </div>
    </template>
    <OrderGoods
      :evaluate="status.type || 0"
      :cartInfo="orderInfo.cartInfo || []"
    ></OrderGoods>
    <div class="wrapper">
      <div class="item acea-row row-between">
        <div>订单编号：</div>
        <div class="conter acea-row row-middle row-right">
          {{ orderInfo.order_id
          }}<span
            class="copy copy-data"
            :data-clipboard-text="orderInfo.order_id"
            >复制</span
          >
        </div>
      </div>
      <div class="item acea-row row-between">
        <div>下单时间：</div>
        <div class="conter">
          {{ orderInfo.add_time_y + " " + orderInfo.add_time_h }}
        </div>
      </div>
      <div class="item acea-row row-between">
        <div>订单类型：</div>
        <div class="conter">
          {{ orderTypeName }}
        </div>
      </div>
      <div class="item acea-row row-between">
        <div>支付状态：</div>
        <div class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>支付方式：</div>
        <div class="conter">{{ orderInfo._status._payType }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.mark">
        <div>买家留言：</div>
        <div class="conter">{{ orderInfo.mark }}</div>
      </div>
    </div>

    <div v-if="orderInfo.status != 0">
      <div class="wrapper" v-if="orderInfo.delivery_type === 'express'">
        <div class="item acea-row row-between">
          <div>配送方式：</div>
          <div class="conter">
            发货
          </div>
        </div>
        <div class="item acea-row row-between">
          <div>快递公司：</div>
          <div class="conter">{{ orderInfo.delivery_name || "" }}</div>
        </div>
        <div class="item acea-row row-between">
          <div>快递号：</div>
          <div class="conter">{{ orderInfo.delivery_id || "" }}</div>
        </div>
      </div>

      <div class="wrapper" v-else>
        <div class="item acea-row row-between">
          <div>配送方式：</div>
          <div class="conter">
            送货
          </div>
        </div>
        <div class="item acea-row row-between">
          <div>配送人：</div>
          <div class="conter">{{ orderInfo.delivery_name || "" }}</div>
        </div>
        <div class="item acea-row row-between">
          <div>配送电话：</div>
          <div class="conter acea-row row-middle row-right">
            {{ orderInfo.delivery_id || "" }}<span class="copy">拨打</span>
          </div>
        </div>
      </div>
    </div> -->
    <!--     退款订单详情 -->
    <!-- <div class="wrapper" v-if="refundOrder">
      <div class="item acea-row row-between">
        <div>收货人：</div>
        <div class="conter">{{ orderInfo.real_name }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>联系电话：</div>
        <div class="conter">{{ orderInfo.user_phone }}</div>
      </div>
      <div class="item acea-row row-between">
        <div>收货地址：</div>
        <div class="conter">{{ orderInfo.user_address }}</div>
      </div>
    </div>
    <div class="wrapper">
      <div class="item acea-row row-between">
        <div>支付金额：</div>
        <div class="conter">￥{{ orderInfo.total_price }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.coupon_price > 0">
        <div>优惠券抵扣：</div>
        <div class="conter">-￥{{ orderInfo.coupon_price }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.use_integral > 0">
        <div>积分抵扣：</div>
        <div class="conter">-￥{{ orderInfo.deduction_price }}</div>
      </div>
      <div class="item acea-row row-between" v-if="orderInfo.pay_postage > 0">
        <div>运费：</div>
        <div class="conter">￥{{ orderInfo.pay_postage }}</div>
      </div>
      <div class="actualPay acea-row row-right">
        实付款：<span class="money font-color-red"
          >￥{{ orderInfo.pay_price }}</span
        >
      </div>
    </div>
    <div style="height:1.2rem;" v-if="!refundOrder && offlineStatus"></div>
    <div
      class="footer acea-row row-right row-middle"
      v-if="!refundOrder && offlineStatus"
    >
      <template v-if="status.type === 0">
        <div class="bnt cancel" @click="cancelOrder">取消订单</div>
        <div class="bnt bg-color-red" @click="pay = true">立即付款</div>
      </template>
      <template v-if="status.type === 1">
        <div
          class="bnt cancel"
          @click="$router.push({ path: '/order/refund/' + orderInfo.order_id })"
        >
          申请退款
        </div>
      </template>
      <template v-if="status.type === 2">
        <div
          class="bnt default"
          @click="
            $router.push({ path: '/order/logistics/' + orderInfo.order_id })
          "
        >
          查看物流
        </div>
        <div class="bnt bg-color-red" @click="takeOrder">
          确认收货
        </div>
      </template>
      <template
        v-if="status.type === 3 && orderInfo.delivery_type === 'express'"
      >
        <div
          class="bnt default"
          @click="
            $router.push({ path: '/order/logistics/' + orderInfo.order_id })
          "
        >
          查看物流
        </div>
      </template>
      <template v-if="status.type === 4">
        <div class="bnt cancel" @click="delOrder">
          删除订单
        </div>
        <div
          class="bnt default"
          @click="
            $router.push({ path: '/order/logistics/' + orderInfo.order_id })
          "
        >
          查看物流
        </div>
      </template>
      <template v-if="status.type === 6">
        <div
          class="bnt bg-color-red"
          @click="
            $router.push({ path: '/activity/group_rule/' + orderInfo.pink_id })
          "
        >
          查看拼团
        </div>
      </template>
    </div>
    <Payment
      v-model="pay"
      :types="payType"
      @checked="toPay"
      :balance="userInfo.now_money"
    ></Payment>
    <div class="geoPage" v-if="mapShow">
      <iframe
        width="100%"
        height="100%"
        frameborder="0"
        scrolling="no"
        :src="
          'https://apis.map.qq.com/uri/v1/geocoder?coord=' +
            system_store.latitude +
            ',' +
            system_store.longitude +
            '&referer=' +
            mapKey
        "
      >
      </iframe>
    </div>
  </div> -->

  <el-container>
    <el-header height="172px" style="padding: 0;">
        <HomeNavigation></HomeNavigation>
        <SearchBox></SearchBox>
        <ClassNavigation></ClassNavigation>
    </el-header>
    <el-main class="detailsMain">
      
      <div class="d-main">
          <p class="title">{{ orderInfo._status._msg }}</p>
          <p class="line"> 下单时间： {{ orderInfo.add_time_y}} {{ orderInfo.add_time_h }}</p>
          <div class="d-body">
            <div class="steps" v-if="!refundOrder">
              <el-steps :space="200" :active="status.type" finish-status="success" align-center>
                  <el-step title="待付款"></el-step>
                  <el-step title="待核销" v-if="orderInfo.shipping_type === 2"></el-step>
                  <el-step title="待发货"></el-step>
                  <el-step title="待收货"></el-step>
                  <el-step title="待评价"></el-step>
                  <el-step title="已完成"></el-step>
              </el-steps>
            </div>
            <div class="users">
              <div class="u-title"><p>收货信息</p></div>
              <div class="user">
                <div class="uLine">收货人：<span class="uItem">{{ orderInfo.real_name }}</span></div>
                <div class="uLine">练习联系方式：<span class="uItem">{{ orderInfo.user_phone }}</span></div>
                <div class="uLine">收货地址：<span class="uItem">{{ orderInfo.user_address }}</span></div>
              </div>
            </div>
            <div class="oder">
              <p class="o-line">商品详情</p>
                <OrderGoods 
                :evaluate="status.type || 0"
                :cartInfo="orderInfo.cartInfo || []"
                ></OrderGoods>
            </div>
            <div class="pay">
              <div class="payTitle acea-row">
                  <div class="line1">订单编号</div>
                  <div class="line2">订单类型</div>
                  <div class="line3">支付方式</div>
                  <div class="line6">支付状态</div>
                  <div class="line4">支付金额</div>
                  <div class="line5">实付款</div>
              </div>
              <div class="payIitem acea-row">
                    <div class="line1">{{ orderInfo.order_id}}</div>
                    <div class="line2">{{ orderTypeName }}</div>
                    <div class="line3">{{ orderInfo._status._payType }}</div>
                    <div class="line6">{{ orderInfo.paid ? "已支付" : "未支付" }}</div>
                    <div class="line4">￥{{ orderInfo.total_price }}</div>
                    <div class="line5">￥{{ orderInfo.pay_price }}</div>
              </div>
            </div>
            <div class="delivery" v-if="orderInfo.status != 0">
              <div class="d-title">
                配送信息
              </div>
              <div class="d-item">
                <div class="uLine">配送方式：<span class="uItem">发货</span></div>
                <div class="uLine">快递公司：<span class="uItem">{{ orderInfo.delivery_name || "" }}</span></div>
                <div class="uLine">快递号：<span class="uItem">{{ orderInfo.delivery_id || "" }}</span></div>
              </div>
            </div>
            <div class="btn acea-row row-right" v-if="status.type === 2">
                <div class="btn1 golden"><el-button  @click="$router.push({ path: '/order/logistics/' + orderInfo.order_id })" ><p>查看物流</p></el-button></div>
                <div class="golden"><el-button @click="takeOrder" ><p>确认收货</p></el-button></div>
            </div>
            <div class="btn acea-row row-right" v-if="status.type === 1">
              <el-button  @click="$router.push({ path: '/order/refund/' + orderInfo.order_id })" ><p>申请退款</p></el-button>
            </div>
            <div class="btn acea-row row-right" v-if="status.type === 3 && orderInfo.delivery_type === 'express'">
                <div class="btn1 golden"><el-button   @click="$router.push({ path: '/order/logistics/' + orderInfo.order_id })" ><p>查看物流</p></el-button></div>
            </div>
            <div class="btn acea-row row-right" v-if="status.type === 4">
                <div class="btn1 golden"><el-button   @click="$router.push({ path: '/order/logistics/' + orderInfo.order_id })" ><p>查看物流</p></el-button></div>
                <div class="golden"><el-button @click="delOrder" ><p>删除订单</p></el-button></div>
            </div>
          </div>
      </div>
    </el-main>
    <el-footer style="padding: 0;">
      <Foot></Foot>
    </el-footer>
  </el-container>

</template>
<style scoped>
.detailsMain {
  padding: 50px 0;
  background-color: #ffffff;
}
.detailsMain .d-main {
  width: 1090px;
  margin: 0 auto;
}
.detailsMain .d-main .title {
  font-family: "Microsoft Yahei","微软雅黑",verdana;
   color: #333333;
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 10px;
  line-height: 1;
  margin-bottom: 10px;
  text-align: center;
}
.detailsMain .d-main .line {
  font-family: "Microsoft Yahei","微软雅黑",verdana;
     padding-bottom: 15px;
     line-height: 1;
     color: #999;
     font-size: 16px;
     border-bottom: 1px solid  #e8e8e8;
}
.detailsMain .d-main .d-body {  
  /* border: 1px solid  #e8e8e8; */
  width: 1090px;
}
.detailsMain .d-main .d-body .steps {
  padding: 20px 0;
}
.detailsMain .d-main .d-body .users {
  width: 1090px;
  height: 192px;
  border: 1px solid  #e8e8e8;
  margin-bottom: 10px;
  
}
.detailsMain .d-main .d-body .users .u-title {
  background-color: #f5f5f5; 
  width: 1088px;
  height: 42px;
  padding-left: 21px;
}
.detailsMain .d-main .d-body .users .u-title p{
  font-family: "Microsoft Yahei","微软雅黑",verdana;
  font-size: 14px;
  color: #999;
  line-height: 41px;
  text-align: left;
  
}
.detailsMain .d-main .d-body .users .user {
  width: 1088px;
  height: 149px;
  padding: 30px 0 30px 30px ;
}
.detailsMain .d-main .d-body .users .user .uLine {
  height: 24px;
  margin-top: 10px;
  font-family: "Microsoft Yahei","微软雅黑",verdana;
  font-size: 14px;
  color: #999;
}
.detailsMain .d-main .d-body .users .user .uLine .uItem {
  color: #333333;
}
.detailsMain .d-main .d-body  .oder {
  margin-top: 30px;
  width: 1090px;
  border: 1px solid  #e8e8e8;
}
.detailsMain .d-main .d-body  .oder .o-line {
  font-family: "Microsoft Yahei","微软雅黑",verdana;
  font-size: 14px;
  color: #999;
  line-height: 41px;
  text-align: left;
  height: 42px;
  background-color: #f5f5f5; 
  padding-left: 21px;
}
.detailsMain .d-main .d-body .pay {
  width: 1090px;
  margin-top: 40px;
  border: 1px solid  #e8e8e8;
}
  .detailsMain .d-main .d-body .pay .payTitle {
    height: 42px;
    background-color: #f4f4f4;
    color: #999;
    font-size: 14px;
    line-height: 41px;
    text-align: center;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
  .detailsMain .d-main .d-body .pay .payTitle .line1 {
    width: 353px;
  }
  .detailsMain .d-main .d-body .pay .payTitle .line2 {
    width: 147px;
  }
  .detailsMain .d-main .d-body .pay .payTitle .line3 {
    width:184px;
  }
  .detailsMain .d-main .d-body .pay .payTitle .line4 , .line5 {
    width: 147.5px;
  }
  .detailsMain .d-main .d-body .pay .payTitle .line6 {
    width: 107px;
  } 
.detailsMain .d-main .d-body .pay .payIitem {
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #666;
    font-size: 14px;
  }
  .detailsMain .d-main .d-body .pay .payIitem .line1 {
    width: 353px;
  }
  .detailsMain .d-main .d-body .pay .payIitem .line2 {
    width: 147px;
  }
  .detailsMain .d-main .d-body .pay .payIitem .line3 {
    width: 184px;
  }
  .detailsMain .d-main .d-body .pay  .payIitem .line4 , .line5 {
    width: 147.5px;
  }
  .detailsMain .d-main .d-body .pay  .payIitem .line6 {
    width: 107px;
  }
  .detailsMain .d-main .d-body .delivery {
    width: 1090px;
    border: 1px solid  #e8e8e8;
    margin-top: 30px;
  }
  .detailsMain .d-main .d-body .delivery .d-title {
    height: 42px;
    background-color: #f4f4f4;
    color: #999;
    font-size: 14px;
    line-height: 41px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    padding-left: 21px;
  }
  .detailsMain .d-main .d-body .delivery  .d-item  {
  width: 1088px;
  height: 149px;
  padding: 20px 0 30px 30px ;
}
.detailsMain .d-main .d-body .delivery  .d-item  .uLine {
  height: 24px;
  margin-top: 10px;
  font-family: "Microsoft Yahei","微软雅黑",verdana;
  font-size: 14px;
  color: #999;
}
.detailsMain .d-main .d-body .delivery  .d-item  .uLine .uItem {
  color: #333333;
}


  .detailsMain .d-main .d-body .btn {
    width: 1090px;
    height: 49px;
    margin-top: 40px;
  }

  .detailsMain .d-main .d-body .btn .btn1 {
    margin-right: 30px;
  }
  .detailsMain .d-main .d-body .btn  p {
    font-size: 16px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #999;
  }
  .detailsMain .d-main .d-body .btn .golden p{
    font-size: 16px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #b4a078;
  }
  .detailsMain .d-main .d-body .btn >>>.el-button--small {
    padding: 15px 43px;
    color: #999;
    border: 1px solid #999;
    background-color: #f5f3ef;
  }
  .detailsMain .d-main .d-body .btn >>>.el-button--small:hover {
    background-color: #FFF;
  }
  .detailsMain .d-main .d-body .golden >>>.el-button--small {
    padding: 15px 43px;
    color: #b4a078;
    border: 1px solid #b4a078;
    background-color: #f5f3ef;
  }
  .detailsMain .d-main .d-body .golden >>>.el-button--small:hover {
    background-color: #FFF;
  }
</style>
<script>
import HomeNavigation from "@components/HomeNavigation";
import ClassNavigation from "@components/ClassNavigation";
import SearchBox from "@components/SearchBox";
import Foot from "@components/Foot";
import OrderGoods from "@components/OrderGoods";
import { orderDetail } from "@api/order";
import ClipboardJS from "clipboard";
import Payment from "@components/Payment";
import { isWeixin } from "@utils";
import { mapGetters } from "vuex";
import {
  cancelOrderHandle,
  takeOrderHandle,
  delOrderHandle,
  payOrderHandle
} from "@libs/order";
import { wechatEvevt } from "@libs/wechat";

const NAME = "OrderDetails";

export default {
  name: NAME,
  components: {
    OrderGoods,
    Payment,
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    Foot
  },
  props: {},
  data: function() {
    return {
      offlinePayStatus: 2,
      orderTypeName: "普通订单",
      orderTypeNameStatus: true,
      offlineStatus: true,
      id: this.$route.params.id,
      orderInfo: {
        _status: {}
      },
      status: {},
      pay: false,
      payType: ["yue", "weixin"],
      from: isWeixin() ? "weixin" : "weixinh5",
      system_store: {},
      mapKay: "",
      mapShow: false
    };
  },
  computed: {
    refundOrder() {
      return this.orderInfo.refund_status > 0;
    },
    ...mapGetters(["userInfo"])
  },
  watch: {
    $route(n) {
      if (n.name === NAME && this.id !== n.params.id) {
        this.id = n.params.id;
        this.getDetail();
      }
    }
  },
  inject: ["app"],
  mounted: function() {
    this.getDetail();
    this.$nextTick(function() {
      let copybtn = document.getElementsByClassName("copy-data");
      const clipboard = new ClipboardJS(copybtn);
      clipboard.on("success", () => {
        this.$dialog.success("复制成功");
      });
    });
  },
  methods: {
    showChang: function() {
      if (isWeixin()) {
        let config = {
          latitude: parseFloat(this.system_store.latitude),
          longitude: parseFloat(this.system_store.longitude),
          name: this.system_store.name,
          address: this.system_store._detailed_address
        };
        wechatEvevt("openLocation", config)
          .then(res => {
            console.log(res);
          })
          .catch(res => {
            if (res.is_ready) {
              res.wx.openLocation(config);
            }
          });
      } else {
        if (!this.mapKey)
          return this.$dialog.error(
            "暂无法使用查看地图，请配置您的腾讯地图key"
          );
        this.mapShow = true;
      }
    },
    goBack() {
      const history = this.app.history,
        last = history[history.length - 1] || {};
      if (last.name === "MyOrder") return this.$router.go(-1);
      else return this.$router.replace({ path: "/order/list/" });
    },
    cancelOrder() {
      cancelOrderHandle(this.orderInfo.order_id)
        .then(() => {
          setTimeout(() => this.goBack(), 300);
        })
        .catch(() => {
          this.getDetail();
        });
    },
    takeOrder() {
      takeOrderHandle(this.orderInfo.order_id).finally(() => {
        this.getDetail();
      });
    },
    delOrder() {
      delOrderHandle(this.orderInfo.order_id).then(() => {
        setTimeout(() => this.goBack(), 300);
      });
    },
    setOfflinePayStatus: function(status) {
      var that = this;
      that.offlinePayStatus = status;
      if (status === 1 && that.orderTypeNameStatus === true) {
        that.payType.push("offline");
      }
    },
    getOrderStatus: function() {
      let orderInfo = this.orderInfo || {},
        _status = orderInfo._status || { _type: 0 },
        status = {};
      let type = parseInt(_status._type),
        delivery_type = orderInfo.delivery_type,
        seckill_id = orderInfo.seckill_id ? parseInt(orderInfo.seckill_id) : 0,
        bargain_id = orderInfo.bargain_id ? parseInt(orderInfo.bargain_id) : 0,
        combination_id = orderInfo.combination_id
          ? parseInt(orderInfo.combination_id)
          : 0;
      status = {
        type: type,
        class_status: 0
      };
      if (type === 1 && combination_id > 0) {
        status.type = 6;
        status.class_status = 1;
      } //查看拼团
      if (type === 2 && delivery_type === "express") status.class_status = 2; //查看物流
      if (type === 2) status.class_status = 3; //确认收货
      if (type === 4 || type === 0) status.class_status = 4; //删除订单
      if (
        !seckill_id &&
        !bargain_id &&
        !combination_id &&
        (type === 3 || type === 4)
      )
        status.class_status = 5; //再次购买
      if (type == 9) {
        //线下付款
        status.class_status = 0;
        this.offlineStatus = false;
      }
      this.status = status;
    },
    getDetail() {
      const id = this.id;
      if (!id) return this.$dialog.error("订单不存在");
      orderDetail(id)
        .then(res => {
          this.orderInfo = res.data;
          this.getOrderStatus();
          if (this.orderInfo.combination_id > 0) {
            this.orderTypeName = "拼团订单";
            this.orderTypeNameStatus = false;
          } else if (this.orderInfo.bargain_id > 0) {
            this.orderTypeName = "砍价订单";
            this.orderTypeNameStatus = false;
          } else if (this.orderInfo.seckill_id > 0) {
            this.orderTypeName = "秒杀订单";
            this.orderTypeNameStatus = false;
          }
          this.system_store = res.data.system_store || {};
          this.mapKey = res.data.mapKey;
          this.setOfflinePayStatus(this.orderInfo.offlinePayStatus);
        })
        .catch(err => {
          this.$dialog.error(err.msg);
        });
    },
    async toPay(type) {
      var that = this;
      await payOrderHandle(this.orderInfo.order_id, type, that.from)
        .then(() => {})
        .catch(res => {
          if (res.status === "WECHAT_H5_PAY")
            that.$router.push({
              path: "/order/status/" + that.orderInfo.order_id + "/0"
            });
        });
      that.getDetail();
    }
  }
};
</script>
